<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="350"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('physicsCanvas');
            const ctx = canvas.getContext('2d');

            // --- Style settings ---
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 1.5;
            ctx.font = 'italic 20px Times New Roman';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            // --- Helper function to draw an arrow ---
            function drawArrow(fromX, fromY, toX, toY) {
                const headlen = 8; // length of head in pixels
                const angle = Math.atan2(toY - fromY, toX - fromX);
                ctx.beginPath();
                ctx.moveTo(fromX, fromY);
                ctx.lineTo(toX, toY);
                ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
                ctx.moveTo(toX, toY);
                ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
                ctx.stroke();
            }
            
            // --- Coordinates and Parameters ---
            const origin = { x: 80, y: 250 };
            const point_A = { x: 110, y: 250 };
            const rodLength = 230;
            const angle_phi_deg = 28;
            const angle_phi_rad = angle_phi_deg * Math.PI / 180;

            // --- Draw Axes ---
            // Y-axis
            drawArrow(origin.x, origin.y + 40, origin.x, 50);
            ctx.fillText('y', origin.x - 20, 45);
            // X-axis
            drawArrow(origin.x - 40, origin.y, 450, origin.y);
            ctx.fillText('x', 460, origin.y);
            // Origin Label
            ctx.fillText('O', origin.x - 15, origin.y + 15);

            // --- Draw Rod AB ---
            const pointB = {
                x: point_A.x + rodLength * Math.cos(angle_phi_rad),
                y: point_A.y - rodLength * Math.sin(angle_phi_rad)
            };
            ctx.beginPath();
            ctx.moveTo(point_A.x, point_A.y);
            ctx.lineTo(pointB.x, pointB.y);
            ctx.stroke();
            ctx.fillText('B', pointB.x + 10, pointB.y - 10);

            // --- Draw Point A and Particle P ---
            // Label for A
            ctx.fillText('A', point_A.x, point_A.y + 20);
            // Particle P (filled circle)
            ctx.beginPath();
            ctx.arc(point_A.x, point_A.y, 4, 0, 2 * Math.PI);
            ctx.fill();
            // Label for P
            ctx.fillText('P', point_A.x - 5, point_A.y - 15);

            // --- Draw Angle φ ---
            const arcRadius = 35;
            ctx.beginPath();
            ctx.arc(point_A.x, point_A.y, arcRadius, 0, -angle_phi_rad, true);
            ctx.stroke();
            
            // Angle Label φ
            const labelRadius = arcRadius + 20;
            const labelAngle = -angle_phi_rad / 2;
            const phiLabelX = point_A.x + labelRadius * Math.cos(labelAngle);
            const phiLabelY = point_A.y + labelRadius * Math.sin(labelAngle);
            ctx.fillText('φ', phiLabelX, phiLabelY);

            // --- Draw Velocity Vector v ---
            // Based on crops showing two parallel arrows
            const v_startX = 330;
            const v_endX = 400;
            const v_y1 = 180;
            const v_y2 = 185;
            
            drawArrow(v_startX, v_y1, v_endX, v_y1);
            drawArrow(v_startX, v_y2, v_endX, v_y2);
            
            ctx.fillText('v', (v_startX + v_endX) / 2, v_y1 - 20);
        };
    </script>
</body>
</html>